<template>
  <div class="dialog-for-column">
    <fks-dialog
      v-if="Visible"
      :visible.sync="Visible"
      :append-to-body="true"
      width="960px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
    >
      <template slot="title">
        <i class="fks-icon-view" />
        <span>{{ LANG.HISTORY_EDITOR }}</span>
      </template>

      <div
        v-loading="loading"
        class="revisions"
      >
        <div class="file-list">
          <div v-if="revisionsList.length > 1">
            <div
              v-for="(revision, index) in revisionsList"
              v-show="index < revisionsList.length - 1"
              :key="`file_${index}`"
              class="file-item"
            >
              <div class="file-img">
                <fks-icon
                  :icon-class="'doc-word'"
                  class="file_icon"
                  style="width: 40px; height: 40px"
                />
              </div>
              <div class="file-describe">
                <span
                  class="file-item-filename"
                  @click="openRevision(revision)"
                >
                  {{ revision.title }}
                </span>
                <span class="file-item-date"> {{ revision.updateDate }}</span>
              </div>
              <fks-divider />
            </div>
          </div>
          <div
            v-else
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 100%;
              height: 100%;
              text-align: center;
              color: rgba(180, 188, 199, 1);
            "
          >
            <h2>{{ LANG.NO_HISTORY_EDITOR }}</h2>
          </div>
        </div>
      </div>

      <template slot="footer">
        <span />
      </template>
    </fks-dialog>
    <dialog-read
      :id="read_dialog_id"
      :title="read_dialog_title"
      :visible="read_dialog_visible"
      :is-revision="true"
      @close="closeReadDialog"
    />
  </div>
</template>

<script>
import { getRevisions } from '@/modules/Content/api'
import DialogRead from '@/modules/Content/components/DialogRead/index'
export default {
  name: 'ContentHistory',
  components: {
    DialogRead
  },
  props: {
    visible: {
      type: Boolean
    },
    contentId: {
      type: String
    }
  },
  data() {
    return {
      read_dialog_visible: false,
      read_dialog_id: '',
      read_dialog_title: '',
      loading: true,
      Visible: false,
      Form: {},
      category_list: [],
      current_status: '',
      current_statusTag: '',
      now: '',
      value1: '',
      statusHistory: [],
      topHistory: [],
      revisionsList: [], //历史版本列表
      lastPulish: {},
      lastTop: {}
    }
  },
  watch: {
    visible(val) {
      this.Visible = val
      if (val) {
        this.resetData()
        this.initData()
      }
    }
  },
  mounted() {
    this.resetData()
  },
  methods: {
    /**
     * @description: 打开时历史版本
     */
    openRevision(row) {
      this.read_dialog_id = row.id
      this.read_dialog_title = row.title
      this.read_dialog_visible = true
    },

    closeReadDialog() {
      this.read_dialog_visible = false
    },

    /**
     * @description: 获取内容的历史版本
     */
    getRevision() {
      this.loading = true
      getRevisions(this.contentId)
        .then((res) => {
          if (res.status) {
            this.revisionsList = res.data
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.revisionsList = []
        })
    },

    close() {
      this.$emit('close')
      this.resetData()
    },
    submit() {
      this.$emit('submit')
    },
    cancel() {
      this.close()
    },
    resetData() {},
    initData() {
      this.resetData()
      this.getRevision()
    }
  }
}
</script>

<style scoped lang="scss">
.file-list {
  height: 400px;

  .file-item {
    position: relative;

    .file-img {
      display: inline;
      width: 20px;
      height: 20px;
      margin-left: 30px;
    }

    .file-describe {
      display: inline;

      .file-item-filename {
        font-size: 18px;

        &:hover {
          color: #6fafff;
          cursor: pointer;
        }
      }

      .file-item-date {
        position: absolute;
        bottom: 10px;
        right: 30px;
      }
    }
  }
}
</style>

<style scoped lang="scss">
::v-deep .fks-dialog__body {
  padding-top: 16px;
  padding-bottom: 0;
  margin-top: 8px;
}
</style>
